Day5 Vue模板語法、V-text、V-html、V-once介紹、Vue指令概述

第 11 屆 iThome 鐵人賽

DAY 5

自我挑戰組

前端新手筆記-Vue.js系列第 5 篇

11th鐵人賽 vue.js vue學習筆記 vue

chunwen

2019-09-21 16:30:44

9744 瀏覽

分享至

本篇文章同時刊載於Andy's Blog

前言

上一篇文章中我們介紹了Vue的生命週期，了解Vue背後是如何把資料渲染到畫面上，也知道如何在不同life hook階段，針對資料進行操控。

而今天這篇文章將介紹Vue的模板語法，讓我們可以開始將Vue Instance（Vue實體）中的資料變化，順利渲染到畫面上。

模板語法

模板語法是邏輯跟頁面之間溝通的媒介

Vue.js 使用了基於HTML 的模板語法，允許開發者聲明式(declaratively)地將DOM 綁定至底層Vue 實例的數據。官網介紹

Vue模板語法共分為兩種

1.插值 Mustache語法
2.指令如：v-bind、v-on、v-model、v-for

一、插值 Mustache語法

範例1:加入文字 jsbin連結

寫法：使用Mustache語法(就是雙大括號)

<span>Message: {{ msg }}</span>

補充：若希望文字能單次綁定 只要加上`v-once`即可，之後再變更實體內msg文字內容畫面也不會改變
<span v-once >Message: {{ msg }}</span>

小結：模板語法撰寫重點

1.必須使用表達式（expression）。簡單來說表達式就是要能產生一個值（或是一個結果）
範例如下：

          {{ rawHtml + text + (number1+number2) }}
          {{ number1+number2 }}
          {{ text.split('').reverse().join('') }}
          {{ ok ? 'Yes': 'No'}}

有個限制，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

V-text、V-html、V-once

V-text插入：渲染純文字內容
V-html：插入整個html結構
V-once：將 data 內的內容渲染後，不再追蹤其變化

    <div v-html="rawHTML"></div>
    <hr>
    <div v-once>msg with v-once: {{ msg }}</div>
    <hr>
    <div v-text="msg"></div>

注意事項

Vue在呈現資料時，必須事先定義好資料，否則將無法實現雙向綁定功能範例程式碼連結

<div id="app2">
<!--   範例1 -->
<!--   <p>{{test}}</p> -->
  <!--   範例2、3 -->
  <p>{{item.text}}</p>
  <button  class="btn btn-primary  " type="button" @click="updateText">點擊</button>
</div>

var app1 =new Vue({
    el:"#app2",
    //data必須是一個物件
    data:{
        item:{
            
        }
    },
    methods:{
        updateText(){
            //範例1 
            //Vue不允許動態添加root屬性value值
            this.test='無法動態添加屬性';
            console.log(this.test);

 
            //範例2 若沒有先宣告資料 則無法同時雙向綁定
            // this.item.text ='這是一個無法同時綁定的文字'
            // console.log(this.item);

            //範例3 強制綁定
                    //(目標/屬性/值)
            // this.$set(this.item,'text','這是一個強制雙向綁定')
            // console.log(this.item);

        }
    }
})
console.log(app1);

建議可以直接上面程式碼貼到本地端，開啟Vue developer tools觀察
HTML中打開範例1 就會出現下面圖示

二、指令 Directives

指令是Vue 所提供特殊的 DOM 屬性， Vue 內建的指令通常會以「 v- 」作為開頭。
指令中的「值」通常⽤來表⽰某個 JS 運算式。而指令的作用，是將某個運算式執⾏後的結果回饋到對應的 DOM 上。

範例1:插入原始HTML結構

寫法：v-html

<h4 class="mt-3">原始 HTML</h4>
{{ rawHtml }}
<p v-html="rawHtml">這邊會渲染出原始 HTML 結構</p>

補充：
網站上動態渲染的任意HTML可能會非常危險，因為它很容易導致XSS攻擊
不建議使用地方：使用者輸入框、密碼欄位等
詳細說明請參考：https://cn.vuejs.org/v2/api/#v-html

範例2:新增參數

寫法：使用v-bind綁定，新增屬性如id、href

<h4 class="mt-3" v-bind:id="htmlId">HTML 屬性</h4>

範例3:動態新增參數

Vue2.6版本新增

<div id="app">
  <a v-bind:[attributeName]="url"> ... </a>
</div>

說明：如果Vue實體內有一個data屬性attributeName，其值為"href"，那麼這個綁定等同v-bind:href 參考資料

範例4:修飾符

使用.當作修飾符

<a v-on:submit.prevent="onSubmit">...</a>

說明：.prevent修飾符等同告訴v-on指令對於觸發的事件使用event.preventDefault()

補充:介紹修飾符

官網--修飾符介紹
Vue 的修飾⼦最主要分成兩種:表單元素的修飾⼦ 與 事件的修飾⼦。

修飾符目的：
用來增強指令 (directive) 附加功能的語法糖。
寫法介紹： v-xxx 的指令後加上「 .xxx 」

而修飾符依照種類可以區分下面幾種：

表單修飾符
事件修飾符（如：事件冒泡事件）
鼠標修飾符
按鍵修飾符
鍵值修飾符

表單修飾符：

.lazy(不會即時更新input)、
.number（將input輸入資料轉為數值）、
.trim（去除首尾空白字符）

<p>lazy修飾符示範</p>
<div>msg: {{ msg }}</div>
<input type="text" v-model.lazy="msg">

事件修飾符：codepen範例原始碼，範例將示範如何翻轉字串
HTML部分

<div id="app">
<input type="text" class="form-control" v-model="text" @keyup.enter="reverseText">

<a href="http://www.google.com" @click.prevent="reverseText" class="btn btn-primary mt-1">反轉字串</a>

<ul>
   <li class="mt-3" v-for="item in content">
       {{ item.title }}
    </li>
  </ul>
</div>

JavaScript部分

var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText:'',
    //儲存newText資料
    content: [
      // {
      //  title:'', 
      // }
    ],
  },
  // 請在此撰寫 JavaScript
  methods: {
    reverseText:function() {
      // event.preventDefault();
      this.newText= this.text.split('').reverse().join('');
      this.content.push(
      {
        title: this.newText,
      }
      )
      this.text =''; //清空資料
    }
  }
});